<%--
  Created by IntelliJ IDEA.
  User: bobo
  Date: 2016/10/25
  Time: 15:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <jsp:include page="../layout/head.jsp">
        <jsp:param name="title" value="用户头像管理"/>
    </jsp:include>

    <style>
        .table-header th:first-child {
            width: 50px;
        }

        .table-header th:nth-child(2) {
            width: 50px;
        }

        .table-list img {
            width: 70px;
            height: 50px;
        }

        .header-search > li:last-child {
            float: right;
        }

        .search-input {
            line-height: 17px;
        }

        .search-input span {
            position: relative;
            top: 2px;
        }


    </style>
</head>
<body>
<div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder">头像列表</strong> <a href="" style="float:right; display:none;">添加字段</a>
    </div>
    <div class="padding border-bottom">

        <ul class="search header-search">
            <li><a class="button border-main icon-plus-square-o"
                   href="${pageContext.request.contextPath}/admin/photo/add"> 添加内容</a></li>
            <li>
                <%--<ul>--%>
                <%--<li class="search-input">--%>
                <%--<input type="radio" value="1" name="status"><span>已启用</span>--%>
                <%--<input type="radio" value="5" name="status"><span>已禁用</span>--%>

                <%--</li>--%>
                <%--<li >--%>
                <%--<input type="text" placeholder="请输入搜索关键字" name="keywords" class="input" style="width:250px; line-height:17px;display:inline-block" />--%>
                <%--<a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a>--%>
                <%--</li>--%>
                <%--<li>--%>
                <%--<a href="javascript:void(0)" class="button border-red icon-trash-o" onclick="DelSelect()"> 删除</a>--%>
                <%--</li>--%>


                <%--</ul>--%>
            </li>
        </ul>

    </div>
    <table class="table table-hover text-center">
        <tr class="table-header">
            <th><input type="checkbox"/></th>
            <th>序号</th>
            <th>图片</th>
            <th>状态</th>
            <th>操作</th>
        </tr>


        <c:forEach items="${headers.list}" var="photo" varStatus="abc">
            <tr class="table-list">
                <td><input type="checkbox"/></td>
                <td>${abc.index+1}</td>
                <td>
                    <a href="${pageContext.request.contextPath}/admin/photo/get?id=${photo.id}"><img src="${photo.img}"></a>
                </td>
                <td>
                    禁 用<input type="radio" class="${photo.id}" name="${photo.id}status"
                              value="5" ${photo.status ==5 ?"checked":""} onchange="radioValue(this)"><br>
                    启 用<input type="radio" class="${photo.id}" name="${photo.id}status"
                              value="1" ${photo.status ==1 ?"checked":""} onchange="radioValue(this)"><br>
                </td>

                <td>
                    <a class="button border-main"
                       href="${pageContext.request.contextPath}/admin/photo/upd?id=${photo.id}">更新</a>
                    <a class="button border-red"
                       href="javascript:void(0);" onclick="del(${photo.id})">删除</a>
                </td>
            </tr>
        </c:forEach>

        <tr>

            <td colspan="5">
                <%--<form action="${pageContext.request.contextPath}/admin/photo/headerImg" method="get" id="headerImg">--%>
                <%--<ul class="pagelist">--%>
                <%--<li><span>共${headers.pageNum}页</span></li>--%>
                <%--<li><a href="${pageContext.request.contextPath}/admin/photo/headerImg?current=1">首页</a></li>--%>
                <%--<li><a href="${pageContext.request.contextPath}/admin/photo/headerImg?current=${(headers.current - 1 ) <= 0 ? 1 : (headers.current - 1) }&pageSize=${headers.pageSize}">上一页 </a> </li>--%>
                <%--<li><span>当前第${headers.current}页</span></li>--%>
                <%--<li><a href="${pageContext.request.contextPath}/admin/photo/headerImg?current=${headers.current + 1 > headers.pageNum ? headers.pageNum  : headers.current + 1   }&pageSize=${headers.pageSize}">下一页 </a></li>--%>
                <%--<li><a href="${pageContext.request.contextPath}/admin/photo/headerImg?current=${headers.pageNum}">尾页</a></li>--%>
                <%--<li><span>每页</span>--%>
                <%--<select name="pageSize" id="changePageSize" >--%>
                <%--<option value="1" ${headers.pageSize == 1 ? "selected" :''} >1</option>--%>
                <%--<option value="2" ${headers.pageSize == 2 ? "selected" :''} >2</option>--%>
                <%--<option value="5" ${headers.pageSize == 5 ? "selected" :''}  >5</option>--%>
                <%--</select>条记录--%>
                <%--</li>--%>
                <%--<li><span>跳转至第</span><input type="number" name="current" min="1" max="${headers.pageNum}"><span>页</span></li>--%>
                <%--<li><input class="button-sub" type="submit" value="跳转"></li>--%>
                <%--</ul>--%>
                <%--</form>--%>


                <jsp:include page="../layout/pager.jsp">
                    <jsp:param name="pageNum" value="${headers.pageNum}"/>
                    <jsp:param name="current" value="${headers.current}"/>
                    <jsp:param name="pageSize" value="${headers.pageSize}"/>
                    <jsp:param name="url" value="${pageContext.request.contextPath}/admin/photo/headerImg"/>


                </jsp:include>

            </td>


            <%--<td colspan="8"><div class="pagelist"> <a href="">上一页</a> <span class="current">1</span><a href="">2</a><a href="">3</a><a href="">下一页</a><a href="">尾页</a> </div></td>--%>
        </tr>
    </table>
</div>

<script>
    function radioValue(node) {
        $.ajax({
            url: "${pageContext.request.contextPath}/admin/photo/changeStatus",
            type: "get",
            data: {"id": node.className, "status": node.value},
            success:function (data) {
                if(data == "true") {
                    alert("修改成功");
                }
            },
            error: function () {
                alert("修改失败");
            }
        })
    }
    function del(id) {
        if(confirm('删除后不可恢复')){
            $.ajax({
                url:"${pageContext.request.contextPath}/admin/photo/delImg",
                type:"get",
                data:{"id":id},
                success:function (data) {
                    if(data == "true"){
                        alert("删除成功");
                        window.location.reload();
                    }else
                    if(data == "false"){
                        alert("删除失败,正在使用中，不能删除");
                    }
                },
                error: function () {
                    alert("删除失败");
                }
            })
        }else {
            return false;
        }
    }
</script>

</body>
</html>
